<template>
<div>
  <el-card>
    <!-- layout栅格 设置多少行多少列 span是宽度 gutter是间隙 -->
    <el-row :gutter="30">

      <el-col :span="6">
        <!-- 搜索与添加区域 -->
        <el-input class="t" placeholder="请输入内容"  clearable > <!-- 将value和query双向绑定 点击搜索就发送请求 请求相应的数据 放到userlist里 如果默认不搜索就是请求所有的数据 同时加上clearble属性 使得点击可以清除输入内容 于是触发clear事件 监听事件让下面显示所有数据 -->
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          align="right"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>
      <el-col :span="6">
        <el-button icon="el-icon-search" >查询</el-button>
        <el-button icon="el-icon-refresh" >重置</el-button>
      </el-col>

    </el-row>
<!--    表格内容区域-->
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="notice"
        label="公告"
        width="180">
      </el-table-column>
      <el-table-column
        prop="admin"
        label="发布人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="time"
        label="发布时间">
      </el-table-column>
    <el-table-column
      prop="state"
      label="状态">
    </el-table-column>
      <el-table-column
        prop="operation"
        label="操作">
      </el-table-column>
    </el-table>
  </el-card>
</div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      tableData: []
    }
  },
  methods: {
    // 用于改变面包屑导航栏
    changeBread () {
      document.getElementById('first').innerHTML = '公告管理'
      document.getElementById('second').innerHTML = '历史公告'
      document.getElementById('separate_1').innerHTML = '/'
      document.getElementById('separate_2').innerHTML = '/'
    }
  },
  mounted () {
    this.changeBread()
  }
}
</script>

<style scoped>

</style>
